
    <div *ngFor="let alert of alerts" class="alertPosition">
        <alert [type]="alert.type" [dismissOnTimeout]="alert.timeout"><span [innerHtml]="alert.msg"></span></alert>
    </div>
    
<form style="margin-top:15%" nz-form [formGroup]="validateForm" (ngSubmit)="signup(validateForm.value)">
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="4">
            <label>用户名</label>
        </div>
        <div nz-form-control  nzHasFeedback nz-col [nzSpan]="14">
            <nz-input formControlName="userName" [nzPlaceHolder]="''" [nzSize]="'large'">
            </nz-input>
            <div nz-form-explain *ngIf="getFormControl('userName').dirty&&getFormControl('userName').hasError('required')">输入用户名啊!</div>
            <div nz-form-explain *ngIf="getFormControl('userName').dirty&&getFormControl('userName').hasError('duplicated')">不给输入这个</div>
            <div nz-form-explain *ngIf="getFormControl('userName').dirty&&getFormControl('userName').pending">Validating...</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nzHasFeedback nz-col [nzSpan]="4">
            <label>密码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="14">
            <nz-input formControlName="passWord" [nzType]="'password'" [nzPlaceHolder]="''" [nzSize]="'large'">
            </nz-input>
            <div nz-form-explain *ngIf="getFormControl('passWord').dirty&&getFormControl('passWord').hasError('required')">输入密码啊!</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nzHasFeedback nz-col [nzSpan]="4">
            <label>重复密码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="14">
            <nz-input formControlName="passWordConfirm" [nzType]="'password'" [nzPlaceHolder]="''" [nzSize]="'large'">
            </nz-input>
            <div nz-form-explain *ngIf="getFormControl('passWordConfirm').dirty&&getFormControl('passWordConfirm').hasError('required')">输入密码啊!</div>
            <div nz-form-explain *ngIf="getFormControl('passWordConfirm').dirty&&getFormControl('passWordConfirm').hasError('confirm')">两次输入的不对啊!</div>
            </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nzHasFeedback nz-col [nzSpan]="4">
            <label>邮箱</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="14">
            <nz-input formControlName="email" [nzPlaceHolder]="''" [nzSize]="'large'">
            </nz-input>
            <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">格式不对!</div>
            <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('required')">输入邮箱啊！</div>
         
        </div>
    </div>

    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="4">
           
        </div>
        <div nz-form-control nz-col [nzSpan]="14">
            <label><button nz-button [nzType]="'primary'" [disabled]="!validateForm.valid" [nzSize]="'large'">注册</button></label>
        </div>
    </div>
    
</form>